window.onload=function(){
	console.log('当前页是购物车结算页面')
	//页面初始化
	$(document).ajaxSend(function(event,xhr){
		xhr.setRequestHeader("token",localStorage.getItem("token"));
		xhr.setRequestHeader("x-requested-with","XMLHttpRequest")
	})
	
	$.get(showCartApi,(res)=>{
		console.log(res.code)
		if(res.code==0){
			let productsArr = res.info
			console.log(productsArr)
			
			
			for(let i=0;i<productsArr.length;i++){
				let html = ''
				let oDiv = document.createElement('div')
				oDiv.className = 'shangpin'
				console.log(oDiv)
				oDiv.setAttribute('data-id',`${productsArr[i].goodsType.goodsTypeId}`)
				console.log(productsArr[i].goodsNum)
				html +=`	
					<div>
						<span data-id="${productsArr[i].goodsType.goodsTypeId}" class="checkSingle" style="color:red;">&#xe6c7;</span>
					</div>
					<div class="pImg">
						<img src="img/gwc_b1.png" >
					</div>
					<div>
						<p class="p1">
							${productsArr[i].goodsType.goods.goodsMsg} 
						</p>
						<p class="p2">
							颜色：${productsArr[i].goodsType.color.colorName}
						</p>
						<p class="p3">
							尺码：${productsArr[i].goodsType.size.sizeName}
						</p>
						<span class="dollar">
							￥<em>${productsArr[i].goodsType.price}</em>
						</span>
						<div class="btn">
							<button data-id="${productsArr[i].goodsType.goodsTypeId}" class="less">
								-
							</button>
							<span data-id="${productsArr[i].goodsType.goodsTypeId}" class="num">
								${productsArr[i].goodsNum}
							</span>
							<button data-id="${productsArr[i].goodsType.goodsTypeId}" class="add">
								+
							</button>
						</div>
					</div>
				`
				oDiv.innerHTML = html
				$('.main')[0].appendChild(oDiv)
			}
			function findTargetObj(pid){
				let spArr = $('.shangpin')
				for(i=0;i<spArr.length;i++){
					if(spArr[i].getAttribute('data-id') == pid){
						return spArr[i]
					}
				}
			}
			//页面初始化
			isAllSelect()
			//增删按钮
			let addBtns = $('.btn .add')
			let showNum = $('.btn .num')[0]
			let subBtns = $('.btn .less')
			
			//增加
			
			function changeNum(){
				for(let i=0;i<addBtns.length;i++){
					addBtns[i].onclick=function(){
						let pnum = parseInt(this.previousElementSibling.innerHTML)
						pnum++;
						this.previousElementSibling.innerHTML = pnum
						let goodsTypeId = this.getAttribute('data-id')
						//连接修改商品数量
						let pObj = productsArr.find(v=>v.goodsType.goodsTypeId ==goodsTypeId)
						pObj.goodsNum = pnum
						$.post(updateCartApi,{goodsTypeId:goodsTypeId,goodsNum:pnum,},(res)=>{
						isAllSelect()
						})
					}
					subBtns[i].onclick=function(){
							let goodsTypeId = this.getAttribute('data-id')
							if(parseInt(this.nextElementSibling.innerHTML)==1){
								alert('商品数量不能为0')
								$.post(deleteCartApi,{goodsTypeId},(res)=>{
									alert('商品删除成功')
									let targetEl = findTargetObj(goodsTypeId)
									targetEl.remove()
									isAllSelect()
								})
								
								return;		
							}
							let pnum = parseInt(this.nextElementSibling.innerHTML)
							pnum--;
							let pObj = productsArr.find(v=>v.goodsType.goodsTypeId ==goodsTypeId)
							pObj.goodsNum = pnum
							this.nextElementSibling.innerHTML = pnum
							
							$.post(updateCartApi,{goodsTypeId:goodsTypeId,goodsNum:pnum,},(res)=>{
								isAllSelect()
							})
						}
					}
				
			}
			changeNum()
				
			
			
			function isAllSelect(){
				let checksArr = []
				let sumShow = document.querySelector('.sumNum')
				for(let i=0;i<$('.checkSingle').length;i++){
					let obj = {color:$('.checkSingle')[i].style.color,goodsTypeId:$('.checkSingle')[i].getAttribute('data-id')}
					checksArr.push(obj)
				}
				console.log(checksArr)
				console.log(productsArr)
				let isAllRed = checksArr.every(v=>v.color == 'red')
				let isAllBlack = checksArr.every(v=>v.color == 'black')
				if(!isAllBlack&&!isAllRed){
					changeNum()
					console.log(checksArr)
					let newArr = []
					for(let i=0;i<checksArr.length;i++){
						if(checksArr[i].color=='red'){
							newArr.push(checksArr[i])
						}
					}
					console.log(newArr)
					let sum =0;
					for(let i=0;i<newArr.length;i++){
						let targetObj = newArr.find(v=>v.color == 'red')
						if(newArr[i].color == 'red'){
							let targetObj = newArr[i]
							let pObj = productsArr.find(v=>v.goodsType.goodsTypeId == targetObj.goodsTypeId)
							let pnum = pObj.goodsNum
							let pPrice = pObj.goodsType.price
							let psum = parseInt(pnum * pPrice);
							sum+=psum
						}
					}
					$('.sumNum')[0].innerHTML = `￥${sum}`
					$('.allSlect')[0].style.color = 'black'
					$('.allSlect')[0].innerHTML='&#xe6c2;';
				}else if(isAllRed){
					console.log('全选上了')
					$('.allSlect')[0].style.color = 'red'
					$('.allSlect')[0].innerHTML='&#xe6c7;';
					let sum = 0;
					console.log(checksArr)
					for(let i=0;i<checksArr.length;i++){
						pObj = productsArr.find(v=>v.goodsType.goodsTypeId==checksArr[i].goodsTypeId)
						let pnum = $('.num')[i].innerHTML
						let pPrice = pObj.goodsType.price
						sum += pnum*pPrice
						sum = parseInt(sum)
						console.log(sum)
						$('.sumNum')[0].innerHTML = `￥${sum}`
					}
				}else if(isAllBlack){
					sumShow.innerHTML='请勾选商品';
					$('.allSlect')[0].style.color = 'black'
					$('.allSlect')[0].innerHTML='&#xe6c2;';
				}
			}
			
			
			//勾选按钮
			//单选按钮
			let checkButtons = $('.checkSingle')
			console.log(checkButtons)
			let checkArr = [];
			for(let i=0;i<checkButtons.length;i++){
				checkButtons[i].onclick=function(){
					if(checkButtons[i].style.color == 'black'){
						this.innerHTML='&#xe6c7;';
						this.style.color='red';
						isAllSelect()
						
						return;
					}else{
						checkButtons[i].innerHTML='&#xe6c2;';
						checkButtons[i].style.color='black';
						isAllSelect()
					}
				}
			}
			
			//点击全选按钮功能
			let allBtn = document.querySelector('.allSlect')
			allBtn.onclick=function(){
				if(this.style.color == 'black'){
					this.innerHTML='&#xe6c7;';
					this.style.color='red';
					for(let i=0;i<checkButtons.length;i++){
						checkButtons[i].innerHTML='&#xe6c7;';
						checkButtons[i].style.color='red';
						isAllSelect()
					}
					
					return;
				}else{
					this.innerHTML='&#xe6c2;';
					this.style.color='black';
					for(let i=0;i<checkButtons.length;i++){
						checkButtons[i].innerHTML='&#xe6c2;';
						checkButtons[i].style.color='black';
						isAllSelect()
					}
					$('.sumNum')[0].innerHTML='请勾选商品';
				}
				
			}
		}else{
			location.href='denglu.html'
		}
	})
	$('.return')[0].onclick=function(){
		window.history.back()
	}
}	
